<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>



		</style>
	</head>
	<body>

		<!-- 视图 -->


		<div id="app">
			
			
			
			<button @click="clickMethod">按钮 : {{counter}}</button>
			<button @click="clickMethod2">按钮 : {{counter}}</button>
			<button @click="clickMethod3">按钮 : {{counter}}</button>
			
			



		</div>



		<!-- 把 vuejs管理的数据跟 视图进行双向绑定-->
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					counter: 0

				},
				methods: {
					clickMethod:function(){
						let that = this;
						
						//访问 
						console.log(this);
						this.counter++;
					},
					clickMethod2:()=>{
						//访问 
						console.log(this);
						this.counter++;
					},
					
					clickMethod3(){
						//访问 
						console.log(this);
						this.counter++;
					}
				}
			})
		</script>



	</body>
</html>
